<template>
	<!-- 我的余额页面 -->
	<view>
		<!-- 余额 -->
		<view class="money column center">
			<text>余额：</text>
			<!-- parseFloat 转成整型  toFixed 保留两个小数点 -->
			<text>{{parseFloat(balance).toFixed(2)}}币</text>
		</view>
			
		
		<!-- 充值 -->
		<view class="recharge">
			<view class="">充值</view>
			
			<view class="list">
				<view :class="{active:index === activeIndex}" v-for="(item,index) in moneyList " :key="index" 
					@click="clickItem(index,item)"
					>
					<view>{{item}}币</view>
					<view>￥{{item}}</view>
				</view>
			</view>
		</view>
		
		<!-- 充值说明 -->
		<view class="desc">
			<view>充值说明：</view>
			<view>
				1.在IOS设备的APP要进行充值后，使用虚拟币消费。<br>
				2.充值后不能在非IOS设备使用，与安卓版和网站余额不通用。<br>
				3.充值后没有使用期限，但不可提现、退换、转让和申请发票。<br>
				4.如遇无法充值、充值失败等问题，可联系QQ:49535474，联系我们解决。<br>
			</view>
			
			<view class="bottom center">
				<button class="btn"  :loading="loading" :disabled="loading" @click="iosPayHandler">立即充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	import api  from '../../api/order.js'
	export default {
		data() {
			return {
				loading:false,
				activeIndex:0,//选中的金额下标
				price:0,//支付金额
				courseIds:[],//支付课程Ids
				balance:0,//余额
				applePrice:0 , //充值金额
				moneyList:[] ,//
				moneyList:[] ,//页面渲染选择金额
				disabled: true,  //要检查支付环境是否iap，不支付则点击立即支付无效
				orderId:null,	//订单ID
			}
		},
		
		onLoad(option) {
				// 接收页面传递过来的参数：支付金额和课程Ids
				if(option.params){
					const params = JSON.parse(option.params)
				this.price = params.price  //支付金额
				this.courseIds = params.courseIds   //课程Ids
				this.orderId = params.orderId
				
				}
				// 查询余额
				this.loadData()
				
		},
		methods: {
			//充值的列表点击充值
			clickItem(index,item){
				console.log(index,'index')
				this.activeIndex = index //点击下标
				this.applePrice = item  //点击要充值的具体金额
				console.log(this.applePrice , 'apple[rice]')
			},
			
		async	loadData(){
				//查询余额
				const {data } = await api.getUserBalance()
				this.balance = data
				
				// 计算还差多少金额, 则充值多少,
				if(this.price){
					//IOS 充值金额 = 余额 balance - 付款金额price
					const  applePrice = this.balance  - this.price
					//先取正数  再向上取整
					this.applePrice  = Math.ceil(Math.abs(applePrice))
				}
				// this.applePrice  计算出了 当前缺多少钱
				console.log(this.applePrice ,'this.applePrice ')
				// 充值列表展示金额
				for(let i=0 ; i<6 ;i++) {
					this.moneyList.push(this.applePrice + i*30)
				}
			},
			iosPayHandler(){
        this.$util.msg('功能暂未开放...')
			},  
			
		}
	}
</script>

<style lang="scss">
		
	.money{
		height: 288rpx;
		background-color: $xg-color-primary;
		color: #FFFFFF;
		font-size: 88rpx;
		text:first-child{
			color:#e7e4e9;
			font-size: 30rpx;
		}
	}
	
	.recharge{
		margin: 25rpx 0 0 30rpx;
		font-size: 30rpx;
		color: #999999;
		.list{
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			>view{
				// float: left;
				width: 225rpx;
				// border: 1px solid grey;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				margin-right: 10rpx;
				margin-bottom:  15rpx;
				padding: 20rpx 0 ;
				view:first-child{
					font-size: 36rpx;
					color: red;
				}
			}
		}
	}
	
	.active{
		box-shadow: 0 0 0  0.5px red;
	}
	
	.desc{
		// 清除父级的 浮动
		// clear:both;
		margin:0rpx 23rpx;
		font-size: 30rpx;
		line-height: 40rpx;
		color: #6e6d70;
		view:first-child{
			font-weight:bold ;
			padding-top: 50rpx;
			padding-bottom: 30rpx;
		}
		view:last:child{
			padding-bottom: 120rpx;
		}
	}
	
	.bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: $xg-underline;
		//class pay 下的第一个元素 view first-child  然后>指向text:last-child  最后一个元素
		// 父元素下的第一个元素first-child  父元素下的最后一个元素last-child
		
		.btn{
			width: 700rpx;
			background-color: $xg-color-primary;
			color: #FFFFFF;
			border-radius: 50rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			//插入元素 
			&::after{
				border: none;
			}
		}
	}
	


</style>
